import { FC, useEffect } from "react";
import {
  OptionsType,
  QuestionRadioDefaultProps,
  QuestionRadioPropsType,
} from "./interface";
import { Button, Checkbox, Form, Input, Select, Space } from "antd";
import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
import { nanoid } from "nanoid";

const PropComponent: FC<QuestionRadioPropsType> = (
  props: QuestionRadioPropsType
) => {
  const { value, options, isVertical, disabeled, title, onChange } = {
    ...QuestionRadioDefaultProps,
    ...props,
  };

  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({ value, options, isVertical, title });
  }, [value, options, isVertical, title, form]);

  function handleValuesChange() {
    const newVal = form.getFieldsValue();
    newVal.options.filter((item: OptionsType) => item.text !== null);
    // console.log(newVal, "newVal");
    onChange?.(newVal);
  }

  return (
    <div>
      <Form
        layout="vertical"
        initialValues={{ value, options, isVertical, title }}
        disabled={disabeled}
        form={form}
        onValuesChange={handleValuesChange}
      >
        <Form.Item
          label="标题"
          name="title"
          rules={[{ required: true, message: "请输入标题" }]}
        >
          <Input></Input>
        </Form.Item>

        <Form.Item label="选中项" name="value">
          <Select
            options={options?.map((c) => ({
              value: c.value,
              label: c.text || " ",
            }))}
          />
        </Form.Item>
        <Form.Item label="选项">
          <Form.List name="options">
            {(fields, { add, remove }) => {
              return (
                <>
                  {fields.map((field, index) => (
                    <Space key={field.key} align="baseline">
                      <Form.Item
                        label=""
                        name={[index, "text"]}
                        rules={[
                          { required: true, message: "请输入选项名字" },
                          {
                            validator: (_, text) => {
                              const { options } =
                                form.getFieldsValue() as QuestionRadioPropsType;

                              let num = 0;
                              options?.forEach((item: OptionsType) => {
                                if (item.text === text) num++;
                              });
                              if (num === 1) return Promise.resolve();
                              return Promise.reject(
                                new Error("不能有相同的字段名")
                              );
                            },
                          },
                        ]}
                      >
                        <Input></Input>
                      </Form.Item>
                      {fields.length > 2 ? (
                        <MinusCircleOutlined
                          onClick={() => remove(field.name)}
                        />
                      ) : null}
                    </Space>
                  ))}

                  <div>
                    <Button
                      type="link"
                      block
                      onClick={() => add({ text: null, value: nanoid(5) })}
                      icon={<PlusCircleOutlined />}
                    >
                      添加选项
                    </Button>
                  </div>
                </>
              );
            }}
          </Form.List>
        </Form.Item>

        <Form.Item label="是否垂直" name="isVertical" valuePropName="checked">
          <Checkbox></Checkbox>
        </Form.Item>
      </Form>
    </div>
  );
};

export default PropComponent;
